import { select, Selection, BaseType } from 'd3-selection';

class DrawTip {
    selection: Selection<HTMLDivElement, string, BaseType, unknown>;

    constructor(text: string) {
        this.selection = select('body')
            .selectChildren('div.seditor_draw_tip')
            .data([text])
            .enter()
            .append('div')
            .classed('seditor_draw_tip', true)
            .text((d) => d);

        select('body').on('mousemove', this.mousemove.bind(this));
    }

    mousemove(e: MouseEvent) {
        const { clientX, clientY } = e;
        this.selection.attr('style', `left:${clientX}px; top:${clientY}px`);
    }

    remove() {
        this.selection.remove();
        select('body').on('mousemove', null);
    }
}

export default DrawTip;
